<template>
  <!-- 保险责任 -->
  <div>
    <div class="flex items-center justify-between mt-[30px] mb-[20px]">
      <div class="flex items-center">
        <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
        <div class="ml-[10px] text-[#EF6800] text-[16px] font-bold">保险责任</div>
      </div>
    </div>
    <div class="max-w-[1100px]">
      <div class="flex justify-between items-center">
        <div class="min-w-[300px]">保险内容</div>
        <div>保险金额</div>
        <div class="w-[40px] text-center">
          <!-- <span>保费</span> -->
        </div>
      </div>

      <div
        class="flex justify-between items-center mt-[20px]"
        v-for="(item, index) in list"
      >
        <div class="flex items-center min-w-[300px]">
          <!-- <div @click="clickCheck(item)">
            <el-image
              v-if="item.check == 1 || item.check == 2"
              :src="getAssetsFile('home/active.png')"
              class="w-[18px] h-[18px]"
            ></el-image>
            <el-image
              v-else
              :src="getAssetsFile('home/noactive.png')"
              class="w-[18px] h-[18px]"
            ></el-image>
          </div> -->
          <div class="text-[14px]">{{ item.title }}</div>
        </div>
        <div class="relative">
          <div>
            <el-select
              :disabled="disabled"
              v-model="item.price"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="(items, key) in item.data"
                :key="key"
                @click="optionClick(key, index, items.name)"
                :label="items.name"
                :value="items.value"
                :disabled="!items.disabled"
              />
            </el-select>
            <div class="absolute right-[-30px] top-[8px] text-[14px]">
              {{ item.unit }}
            </div>
          </div>
        </div>

        <div class="w-[40px] text-center text-[14px]">
          <!-- {{ item.price }} -->
        </div>
      </div>
      <!-- 保费 -->
      <div class="flex justify-between items-center mt-[20px]">
        <div class="flex items-center min-w-[300px] text-[14px]">保费</div>
        <div class="text-start w-[240px] text-red-500">
          {{ personCost.toFixed(2) }}
        </div>
        <div class="w-[40px] text-center text-[14px]">
          <!-- {{ price!.add_price }} -->
        </div>
      </div>
      <!-- 加费输入框 -->
      <div class="flex justify-between items-center mt-[20px]">
        <div class="flex items-center min-w-[300px] text-[14px]">加费</div>
        <div>
          <el-input
            v-model="price!.add_price"
            style="width: 240px"
            :disabled="disabled"
            @keyup="inputChange"
            :precision="2"
          ></el-input>
        </div>
        <div class="w-[40px] text-center text-[14px]">
          <!-- {{ price!.add_price }} -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl.ts";
import {
  reactive,
  defineProps,
  watchEffect,
  ref,
  defineExpose,
  defineEmits,
} from "vue";
import { getPrice } from "@/utils/api";
import { useRouter, useRoute } from "vue-router";
const props = defineProps({
  duty: { type: Array<dutyType> },
  start_time: { type: Number },
  end_time: { type: Number },
  disabled: { type: Boolean, default: false },
  price: { type: Object as any },
  personCost:{type:Number,default:0}
});
const emit = defineEmits(["change"]);
// const add_price = ref<string>("0"); //加费
const optionIndex = ref();
const list = ref<Array<dutyType>>([]);
const route = useRoute();
watchEffect(() => {
  if (props.duty) {
    list.value = props.duty;

    list.value.forEach((item: any) => {
      // item.money = "0.00";
      //item.price = "0.00";
      item.data.forEach((it: any, _: number) => {
        it["disabled"] = true;
      });
    });

    //emit("change", list.value);
  }
  // if (props.price) {
  //   console.log(88);

  //   add_price.value = props.price;
  // }
});
const inputChange = () => {
  emit("change", list.value);
};
const clickCheck = (item: any) => {
  //0是未选中 1是已选中 2是选中不能修改

  if (item.check == 0) {
    item.check = 1;
  } else if (item.check == 1) {
    item.check = 0;
  }
};

const optionClick = (index: number, parentIndex: number, name: string) => {
  //选择方案时判断

  list.value[parentIndex].money = name;

  if (parentIndex == 0) {
    list.value[1].price = "0.00";
    // list.value[1].money = "0.00";
    list.value[1].data.forEach((item: any, i: number) => {
      if (i > index + 1) {
        item.disabled = false;
      } else {
        item.disabled = true;
      }
    });
  }
  emit("change", list.value);
};
defineExpose({
  list,
});
</script>
